<!-- <div>
  <label for="">姓名
    <input type="text" [(ngModel)]="hero.name" placeholder="请输入姓名">
  </label>

</div>

<h2>{{ hero.name }} Details</h2>
<div>
  <span>id: </span>{{hero.id}}</div>
<div>
  <span>name: </span>{{hero.name}}</div>
<div>
  <span>type: </span>{{hero.type}}</div> -->

<!-- click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。
  当用户点击 <li> 时，Angular 就会执行表达式 onSelect(hero)。 -->
<!-- onSelect() 是 HeroesComponent 上的一个方法，你很快就要写它。
  Angular 会把所点击的 <li> 上的 hero 对象传给它，
  这个 hero 也就是以前在 *ngFor 表达式中定义的那个。 -->
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero===selectedHero">
    <span class="badge">{{hero.id}}</span>{{hero.name}}
  </li>
</ul>

<!-- uppercase 调用内置管道 UppercasePipe 将英雄的名字显示成了大写字母 -->
<!-- <div *ngIf="selectedHero">
  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div>
    <span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>
</div> -->

<!-- 这里把详细信息拆分出去 引用子组件 -->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
